<script setup>
//useRoute, useRouter 函数,在script标签中，可以通过 useRouter() 和 useRoute() 函数来访问路由器实例和当前路由。
import { useRoute, useRouter } from 'vue-router'
// $router是路由实例,在template模板中被暴露
// Vue Router路由实例，它是一个全局的路由对象，包含了路由的跳转方法、钩子函数等。
// 你可以通过它来编程式地导航到不同的URL，或者监听路由导航事件。
const router = useRouter()
// $route 是路由信息对象,在template模板中被暴露
// 路由信息对象，包含了当前激活的路由的信息。这个对象是不可变的，每次路由切换时，Vue Router 都会更新这个对象，以反映当前路由的状态。
const route = useRoute()
// console.log(route);
// console.log(router);

</script>
<template>
    <h1>Hello App!</h1>
    <p>
        <strong>Current route path:</strong> {{ $route.fullPath }}
    </p>
    <nav>
        <!-- 
        RouterLink，用于创建导航链接的组件。
        它默认渲染为一个<a>标签，但其行为会根据当前的路由来自动地切换活动的class（当链接是激活状态时，它会自动添加一个.router-link-active的class），
        并且当用户点击链接时，它不会执行浏览器的默认跳转，而是会使用Vue Router来更改URL并渲染对应的组件。 
        -->
        <RouterLink to="/">Go to Home | </RouterLink>
        <RouterLink to="/about">Go to About | </RouterLink>
        <br>
        <!-- 带参数的动态路由匹配 -->
        <RouterLink to="/users/johnny">johnny | </RouterLink>
        <RouterLink to="/users/jolyne">jolyne | </RouterLink>
        <RouterLink to="/users/david/vvvv/210108">david 210108 | </RouterLink>
        <br>
        <!-- 带参数的动态路由匹配 -->
        <router-link to="/u/123">User 123 | </router-link>
        <router-link to="/u/Product">Product | </router-link>
        <!-- 可重复的参数 -->
        <router-link to="/p/one/two/three">Product one/two/three | </router-link>
        <br>
        <!-- 嵌套路由 -->
        <RouterLink to="/users/johnny/profile">johnny profile | </RouterLink>
        <RouterLink to="/users/johnny/posts">johnny posts | </RouterLink>
        <RouterLink to="/users/jolyne/profile">jolyne profile | </RouterLink>
        <RouterLink to="/users/jolyne/posts">jolyne posts | </RouterLink><br>
        <!-- 命名路由 然后我们可以使用 name 而不是 path 来传递 to 属性给 <router-link></router-link> -->
        <RouterLink :to="{ name: 'usernames', params: { id: 'kitty' }}">kitty </RouterLink>
        <br>
        <router-link to="/userSettings/one">命名视图 1 | </router-link>
        <router-link to="/userSettings/two">命名视图 2 | </router-link>
        <RouterLink to="/userprop/johnnyprop">johnnyprop </RouterLink>
    </nav>
    <button @click="$router.push('/about')">Go to About</button>
    <button @click="$router.replace('/users/johnny')">Go to johnny</button>
    <button @click="$router.go(-1)">Go Back</button>
    <button @click="$router.go(1)">Go Forward</button>
    <hr/>
    <!-- RouterView，可将其视为一个占位符，Vue Router会将其替换为当前路由对应的组件。 -->
    <RouterView />

</template>